/*
  TITLE BAR
  ---------

  A navigational component which can display the current screen the user is on, along with additional controls or menu items.

  The title bar includes classes to create center, left, and right sections, which can be used in any combination. However, in the markup, the sections must come in this order:
   - Center
   - Left
   - Right
*/
.title-bar {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    overflow: visible; }
.title-bar .title {
    font-weight: bold; }
.title-bar .left, .title-bar .center, .title-bar .right {
    display: block;
    white-space: nowrap;
    overflow: visible; }
.title-bar .left:first-child:last-child, .title-bar .center:first-child:last-child, .title-bar .right:first-child:last-child {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 0; }
.title-bar .left {
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%; }
.title-bar .center {
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    text-align: center; }
.title-bar .right {
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    text-align: right; }
.title-bar .left:first-child {
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto; }
.title-bar .left:first-child + .right:last-child {
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto; }
.title-bar .center:first-child:not(:last-child) {
    margin-left: 25%; }
.title-bar .center + .left {
    margin-right: -25%; }

.title-bar {
    background: #eee;
    color: #000;
    padding: 1rem;
    border-bottom: 1px solid #ccc; }
.title-bar.primary {
    background: #00558b;
    color: #fff;
    padding: 1rem;
    border-bottom: 1px solid #ccc; }
.title-bar.primary a, .title-bar.primary a:hover {
    color: #fff; }
.title-bar.primary .iconic * {
    fill: #fff;
    stroke: #fff; }
.title-bar.primary .iconic *.iconic-property-accent {
    fill: #fff;
    stroke: #fff; }
.title-bar.dark {
    background: #232323;
    color: #fff;
    padding: 1rem;
    border-bottom: 1px solid #ccc; }
.title-bar.dark a, .title-bar.dark a:hover {
    color: #fff; }
.title-bar.dark .iconic * {
    fill: #fff;
    stroke: #fff; }
.title-bar.dark .iconic *.iconic-property-accent {
    fill: #fff;
    stroke: #fff; }

.title-bar-bottom {
    border-bottom: 0;
    border-top: 1px solid #ccc; }

.list {
    list-style-type: none;
    background: #fefefe;
    border: 1px solid #e6e6e6;
    border-bottom: 0;
    border-radius: 0;
    margin-left: 0; }

.list-item {
    display: block;
    padding: 0.5rem 1rem;
    line-height: 1;
    font-size: 0.75rem;
    color: #000;
    position: relative;
    border-bottom: 1px solid #e6e6e6; }

.list-item .list-item-text {
    display: block;
    font-size: 1rem;
    padding-bottom: 0.25rem;
    overflow: hidden;
}

.list-item .left {
    line-height: 2rem;
}

.list-item .right {
    margin-top: 0.5rem;
    position: absolute;
    right: 1rem;
    top: 0;
}

.list-item-button {
    padding: 0.5rem;
    margin : 0;
}

body {
    background-color: #f0f0f0;
}

.form-body {
    padding : 1rem;
    background-color: #fff;
}

.form-bottom {
    padding : 1rem 0;
}

.full-button {
    width:100%;
}

[type="text"].line {
    border-width: 0 0 1px 0;
    box-shadow : none;
}

[type="text"]:focus.line {
    border-width: 0 0 1px 0;
    box-shadow : none;
}

.break-all {
    word-break: break-all;
}

.block {
    margin-top: 1rem;
    background-color: #fff;
}

.full-block {
    padding:0.5rem 1rem;
    background-color: #fff;
}

.text-block {
    padding: 1rem;
}

#loading-mask{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:20000;
    background-color:gray;
    opacity:0.8;
}

#loading-mask .loading{
    position:absolute;
    left:45%;
    top:40%;
    padding:2px;
    z-index:20001;
    height:auto;
}
#loading .loading-indicator{
    color:#444;
    font:bold 20px tahoma,arial,helvetica;
    padding:10px;
    margin:0;
    height:auto;
}

#loading .loading-img {
    width:32px;
    height:32px;
    margin-right:8px;
    float:left;
    vertical-align:top;
}

#loading .loading-msg {
    font: normal 18px arial,tahoma,sans-serif;
}

.task-finished {
    background-color: #ddd;
}